<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="/js/jquery.min.js"></script>
	<title>管理员登录</title>
	<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	body{
		background: #5dc1cf;
		color:#252525;
		font-family: "微软雅黑";
	}
	.page{
		width:1400px;
		height: 670px;
		margin: 0 auto;
		margin-top: 150px;
		overflow: hidden;
		background:url(/img/admin/logoBg.jpg) no-repeat;
		background-position:center center;
		background-size: 100% 100%;
	}
	.page > div{
		float: left;
		height: 395px;
		margin-top: 120px;
		
	}
	.page .leftPart{
		color:#fff;
		width:700px;
		text-align: center;
	}
	.page .leftPart .adminText{
		font-size: 50px;
		margin-top: 190px;
		margin-bottom: 30px;
	}
	.page .leftPart p span{
		width: 5px;
		height: 5px;
		margin:0 25px;
		display: inline-block;
		border-radius:50%;
		background:#fff; 
	}
	.page .rightPart{
		width:500px;
		margin-left: 120px;
	}
	.page .rightPart .pageLogo{
		margin:0 0 50px 100px;
	}
	.page .rightPart .writeBox{
		width:390px;
		height: 300px;
		padding-left: 40px;
		background: #fff;
		border:5px solid #54aab4;
		font-size: 14px;
	}
	.page .rightPart .writeBox .title{
		width:430px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: red;
		margin-left: -40px;
		border-bottom: 1px solid #ccc;
		background: #f8fbfb;
	}
	.page .rightPart .writeBox > p{
		width:350px;
		height: 40px;
		margin: 4px 0;
		border:1px solid #ccc;
		font-size: 20px;

	}
	.page .rightPart .writeBox .userNameBox{

		background:url(/img/admin/nameLogo.png) no-repeat;
		background-size:20px 20px;
		background-position: 20px center;

	}
	.page .rightPart .writeBox .passwordBox{
		background:url(/img/admin/psdLogo.png) no-repeat;
		background-size:20px 20px;
		background-position: 20px center;
	}
	.page .rightPart .writeBox p > input{
		margin-left: 50px;
		height:25px;
		width:300px;
		margin-top: 10px;
		border:none;
		font-size: 16px;
		
	}
	.page .rightPart .writeBox .loginBtn{
		width:350px;
		height: 40px;
		background:#3bc1c3;
		border-radius:3px;
		text-align:center;
		line-height: 40px;
		color:#fff;
		margin: 20px 0;
		font-size: 17px;
		cursor: pointer;
	}
	/*.hint_bg{
		width:100%;
		display: none;	
		background: rgba(0,0,0,.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		display: none;
		font-size: .8rem;
	}
	.hint_bg .hint_box{
		width: 350px;
		height: 200px;
		background: #ecebeb;	
		position: absolute;
		text-align: center;
		color:#000;
		border-radius: 13px;
		left:50%; 
		top:50%;
		margin-left:-150px; 
		margin-top:-120px; 
	}
	.hint_bg .hint_box p{
		margin-top: 40px;
		font-size: 15px;
		padding: 0 10px;
		line-height: 30px;
	}
	.hint_bg .hint_box div{
		width:100px;
		margin: 50px auto; 
		border:1px solid #7e7e7e;
		padding: 6px 0;
		border-radius:6px;
		cursor:pointer;
	}
	.hint_casket >.hint_btn{
		width:350px;
		height: 40px;	
	}
	.hint_casket >.hint_btn div{
		float: left;
		margin-left: 60px;
		margin-top: 60px;
		width:85px;
		border:1px solid #7e7e7e;
		padding: 6px 0;
		border-radius:6px;
		cursor:pointer;
	}*/
	</style>
</head>
<body onkeydown="on_return(event);">
	<div class="page">
		<div class="leftPart">
			<p class="adminText">鹤庭净水后台数据管理系统</p>
			<p>至善<span></span>至纯</p>
		</div>
		<div class="rightPart">
			<img class="pageLogo" src="/img/admin/logoPic.png" />
			<div class="writeBox">
				<div class="title"></div>
				<span>用户名</span>
				<p class="userNameBox">
					<span></span><input class="writeUserName" type="text" placeholder="请输入用户名" />
				</p>
				<span>密码</span>
				<p class="passwordBox">
					<span></span><input class="writePassword" type="password" placeholder="请输入密码" />
				</p>
				<div class="loginBtn">登录</div>
			</div>
		</div>
	</div>
	<!-- 提示信息框 -->
	<!-- <div class="hint_bg">
		<div class="hint_box">
			<p class="hint_text"></p>
			<div class="hint_btn">确定</div>
		</div>
	</div> -->
	<script type="text/javascript">
		$(".loginBtn").click(function(){
			if($(".writeUserName").val()==""){
				$(".title").html("用户名不能为空");
			}else if($(".writePassword").val()==""){
				$(".title").html("密码不能为空");
			}else if($(".writePassword").val().toString().length<6){
				$(".title").html("密码不能低于6位字符");
			}else{
				$(".title").html("");
				$.ajax({
					url:"/admin/api/user/login",
					type:"post",
					dataType:"json",
					data:{
						username:$(".writeUserName").val(),
						password:$(".writePassword").val()
					},
					success:function(data){
						if(data.status.errCode == 0){
				 			window.location.href = "{{url('/admin/device/index')}}";
			            }else{
			            	$(".title").html(data.status.message);
			            }
					}
				});
			}
			
		});
		// //提示信息
		// function hint(hint){
		// 	$('.hint_bg').css("display","block");
		// 	$('.hint_bg').height($(window).height()+"px");
		// 	$('.hint_bg').width($(window).width()+"px");
		// 	$('.hint_text').html(hint);
		// 	$('.hint_btn').click(function(){
		// 		$('.hint_bg').css("display","none");
		// 	});
		// }
		//执行键盘按键命令
		function on_return(e){ 
		 var keycode = 0;
		 //IE浏览器
		 if(CheckBrowserIsIE()){
		  keycode = event.keyCode;
		 }else{
		 //火狐浏览器
		 keycode = e.which;
		 }
		 if (keycode == 13 ) //回车键是13
		 {
		  $(".loginBtn").click();
		 }
		}
		//判断访问者的浏览器是否是IE
		function CheckBrowserIsIE(){
		 var result = false;
		 var browser = navigator.appName;
		 if(browser == "Microsoft Internet Explorer"){
		  result = true;
		 }
		 return result;
		}
	</script>
</body>
</html>
